<template>
    <div class="container border border-2 my-5">
        <div class="row my-4">
            <div class="col-8 offset-2">
                <Son1 :s1List="list" @change-change="changes"/>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-8 offset-2">
                <Son2 :s2ResultList="resultList"/>
            </div>
        </div>
    </div>
  </template>
  
  <script setup>
  
  import Son1 from './Son1.vue';
  import Son2 from './Son2.vue';
  import axios from '../axios.js';
  import { ref,watchEffect } from 'vue';
  import { nanoid } from 'nanoid';
  
  const list = ref([
    {   
        id: nanoid(6),
        head: '精华',
        en: 'good',
        style:{
        backgroundColor: 'white',
        color: 'green'
        }
    },
    {
        id: nanoid(6),
        head: '分享',
        en: 'share',
        style:{
        backgroundColor: 'white',
        color: 'green'
        }
    },
    {
        id: nanoid(6),
        head: '问答',
        en: 'ask',
        style:{
        backgroundColor: 'white',
        color: 'green'
        }
    },
    {
        id: nanoid(6),
        head: '招聘',
        en: 'job',
        style:{
        backgroundColor: 'white',
        color: 'green'
        }
    },
    {
        id: nanoid(6),
        head: '客户端测试',
        en: 'test',
        style:{
        backgroundColor: 'white',
        color: 'green'
        }
    }
  ]);
  const currentHead = ref('精华');
  const resultList = ref([]);
  const changes = (ids,heads) => {
    currentHead.value = heads;
  };
  watchEffect(()=>{
    // 改变head背景和字体颜色
    list.value.forEach(val=>{
        if(val.head==currentHead.value) {
            val.style.backgroundColor = 'green';
            val.style.color = 'white';
        } else {
            val.style.backgroundColor = 'white';
            val.style.color = 'green';
        }
    });
  
    
    // axios
    axios.get('https://cnodejs.org/api/v1/topics',{
        params: {
            tab: list.value[list.value.findIndex(val=>{if(val.head==currentHead.value) return true})].en
        }
    }).then(res=>{
        console.log(res);
        // console.log(res.data.data);
        resultList.value = res.data.data;
    });
  });
  
  </script>

<style scoped>

</style>